<template>
  <Dialog :visible.sync="dialog.visible" :title="dialog.title" :width="dialog.width" @onClose='onClose'
    @onConfirm='confirm' :height="dialog.height">
    <template v-slot:content>
      <el-form ref="addRoleForm" :model="addRoleModel" :rules="rules" label-width="120px" class="demo-ruleForm"
        :size="formSize" status-icon>
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="addRoleModel.roleName" />
        </el-form-item>
        <el-form-item label="角色标题" prop="roleTitle">
          <el-input v-model="addRoleModel.roleTitle" />
        </el-form-item>
        <el-form-item label="角色备注" prop="remark">
          <el-input v-model="addRoleModel.remark" />
        </el-form-item>
      </el-form>
    </template>
  </Dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
const emit = defineEmits(['save'])
import Dialog from '@/components/dialog/Dialog.vue';
import { useDialog } from '@/hooks/useDialog'
import { useRoleAddAndEdit } from '@/composables/role/useRoleAddAndEdit';
import { useBaseModel } from '@/composables/role/useBaseModel'
const { addRoleModel, rules } = useBaseModel()
const { dialog, onClose, onShow } = useDialog()
const { confirm, show, addRoleForm } = useRoleAddAndEdit(dialog, onClose, onShow, addRoleModel, emit)
//暴露方法给外部使用
defineExpose({
  show
})
const formSize = ref('default')
</script>

<style lang="scss" scoped></style>